<template>
  <div>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix" ref="form" :model="chabuForm">
        <el-row>
          <el-col :span="2">
            <span>部门搜索</span>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-form size="mini">
          <el-row>
            <el-col :span="4">
              <span>部门名称</span>
            </el-col>
            <el-col :span="4">
              <el-input v-model="chabuForm.deptName" size="mini"></el-input>
            </el-col>
            <el-col :span="6">
              <el-button type="mini" @click="submitForm()">查询</el-button>
              <el-button type="mini" @click="dialogFormVisible = true">添加</el-button>
              <el-button type="mini" @click="submitForm()">删除</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <br />
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix" ref="form" :model="chabuForm">
        <el-row>
          <el-col :span="2">
            <i class="el-icon-share"></i>
            <span>信息列表</span>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-table :data="kehuData" border style="width: 100%">
          <el-table-column fixed prop="deptId" label="编号"></el-table-column>
          <el-table-column prop="deptName" label="部门名称"></el-table-column>
          <el-table-column prop="depDepartName" label="上级部门"></el-table-column>
          <el-table-column prop="deptIndex" label="部门列表">
            <template slot-scope="scope">
              <el-link target="_blank">{{scope.row.deptIndex==1?"显示":"隐藏"}}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="deptDesc" label="部门描述"></el-table-column>
          <el-table-column prop="deptTypeId" label="部门类型"></el-table-column>
          <el-table-column prop="staffId" label="排序"></el-table-column>
          <el-table-column fixed="right" label="操作" width="90">
            <template slot-scope="scope">
              <el-button @click="fantian(scope.row.deptId)" type="text" size="small">编辑</el-button>
              <el-button @click="bushan(scope.row.deptId)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="shujuxian"
          @current-change="shujuxian"
          :current-page.sync="pageIndex"
          :page-sizes="[3, 5, 7, 9]"
          :page-size.sync="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="50"
        ></el-pagination>
      </div>
    </el-card>
    <!-- 添加弹框  -->
    <el-dialog title="添加部门" :visible.sync="dialogFormVisible">
      <el-form :model="buAddform">
        <el-form-item label="上级部门" :label-width="formLabelWidth">
          <el-select v-model="buAddform.depDepartment" placeholder="请选择">
            <el-option
              v-for="item in bumenxia"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId"
            ></el-option>
          </el-select>
          <!-- <el-input v-model="buAddform.depDepartment"></el-input> -->
        </el-form-item>
        <el-form-item label="部门名称" :label-width="formLabelWidth">
          <el-input v-model="buAddform.deptName"></el-input>
        </el-form-item>
        <el-form-item label="部门类型" :label-width="formLabelWidth">
          <el-select v-model="buAddform.deptTypeId" placeholder="请选择">
            <el-option label="施工图部门" value="施工图部门"></el-option>
            <el-option label="方案部门" value="方案部门"></el-option>
            <el-option label="特殊部门（设计）" value="特殊部门（设计）"></el-option>
            <el-option label="特殊部门（行政）" value="特殊部门（行政）"></el-option>
            <el-option label="其他部门" value="其他部门"></el-option>
          </el-select>
          <!-- <el-input v-model="buAddform.deptTypeId"></el-input> -->
        </el-form-item>
        <el-form-item label="部门描述" :label-width="formLabelWidth">
          <el-input v-model="buAddform.deptDesc"></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="buAddform.staffId"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="BuAdd()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改弹框 -->
    <el-dialog title="编辑部门" :visible.sync="dialogXiuVisible">
      <el-form :model="buupdateform">
        <el-form-item label="部门ID" :label-width="formLabelWidth">
          <el-input v-model="buupdateform.deptId"></el-input>
        </el-form-item>
        <el-form-item label="上级部门" :label-width="formLabelWidth">
          <el-select v-model="buupdateform.depDepartment" placeholder="请选择">
            <el-option
              v-for="item in bumenxia"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId"
            ></el-option>
          </el-select>
          <!-- <el-input v-model="buupdateform.depDepartment"></el-input> -->
        </el-form-item>
        <el-form-item label="部门名称" :label-width="formLabelWidth">
          <el-input v-model="buupdateform.deptName"></el-input>
        </el-form-item>
        <el-form-item label="部门类型" :label-width="formLabelWidth">
          <el-select v-model="buupdateform.deptTypeId" placeholder="请选择">
            <el-option label="施工图部门" value="施工图部门"></el-option>
            <el-option label="方案部门" value="方案部门"></el-option>
            <el-option label="特殊部门（设计）" value="特殊部门（设计）"></el-option>
            <el-option label="特殊部门（行政）" value="特殊部门（行政）"></el-option>
            <el-option label="其他部门" value="其他部门"></el-option>
          </el-select>
          <!-- <el-input v-model="buupdateform.deptTypeId"></el-input> -->
        </el-form-item>
        <el-form-item label="部门描述" :label-width="formLabelWidth">
          <el-input v-model="buupdateform.deptDesc"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" :label-width="formLabelWidth">
          <el-radio-group v-model="buupdateform.deptIndex">
            <el-radio :label="1">显示</el-radio>
            <el-radio :label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="buupdateform.staffId"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="bianjibu()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chabuForm: {
        deptName: ""
      },
      kehuData: [],
      pageIndex: 1,
      pageSize: 3,
      totalCount: 0,
      buAddform: {
        depDepartment: 0,
        deptName: "",
        deptTypeId: "",
        deptDesc: "",
        staffId: 0
      },
      dialogFormVisible: false,
      dialogXiuVisible:false,
      bumenxia: [],
      formLabelWidth: "120px",
      buupdateform: {
        deptId:0,
        depDepartment: 0,
        deptName: "",
        deptTypeId: "",
        deptIndex:0,
        deptDesc: "",
        staffId: 0
      }
    };
  },
  created() {
    //  this.loginUserName = this.$cookieTools.getLoginUser().user_name;
    this.shujuxian();
    this.XialYa();
  },
  methods: {
    shujuxian() {
      this.$myaxios(
        "DepartmentStaff/DepartmentPoInquire?pageIndex=" +
          this.pageIndex +
          "&pageSize=" +
          this.pageSize +
          "&deptName=" +
          this.chabuForm.deptName
      ).then(r => {
        this.kehuData = r.data;
        // this.totalCount=r.data.data.length;
      });
    },
    BuAdd() {
      this.$myaxios
        .post("DepartmentStaff/DepartmentPoAdd", this.buAddform)
        .then(r => {
          if (r.data) {
            this.$message("添加成功");
            this.dialogFormVisible = false;
            this.shujuxian();
          }
        });
    },
    XialYa() {
      this.$myaxios.get("DepartmentStaff/departmentPoXia").then(r => {
        this.bumenxia = r.data;
      });
    },
    fantian(id) {
      this.$myaxios
        .get("DepartmentStaff/DepartmentPoOne?id=" + id)
        .then(r => {
          this.dialogXiuVisible=true;
          this.buupdateform=r.data;
          
        });
    },
    // 部门修改
    bianjibu() {
      this.$myaxios.post("DepartmentStaff/DepartmentPoUpdate",this.buupdateform).then((r)=>{
        if (r.data) {
            this.$message("修改成功");
            this.dialogXiuVisible = false;
            this.shujuxian();
          }
      })
    },
    // 部门删除
    bushan(id){
      this.$myaxios.get("DepartmentStaff/DepartmentPoDelete?id="+id).then((r)=>{
        if (r.data) {
            this.$message("删除成功");
            this.shujuxian();
          }
      })
    },
    submitForm() {
      this.shujuxian();
    }
  }
};
</script>

<style>
</style>